<template>
  <div id="pdfDom">
    <el-row v-show="isDetails">
        <el-col :xs="24" :sm="24" :lg="24" class="primary">{{ title }}-质量KPI月报</el-col>
    </el-row>
    <el-row>      
      <el-col :xs="24" :sm="24" :lg="24" style="position: relative">
        <v-choose :isShowKpiData="true" v-if="!isDetails"  ref="choose"></v-choose>

        <el-button class="newReport" v-show="!pdfStatus" @click="toEdit" type="primary" icon="el-icon-download">编辑报告</el-button>
        <el-button class="newReport" v-show="pdfStatus" @click="initSave" type="primary" icon="el-icon-success">保存报告</el-button>
      
        <el-button v-if="isDetails" @click="getPdf(comMonth)" type="primary" icon="el-icon-success">导出PDF</el-button>
      </el-col>  
    </el-row>

    <div v-if="chooseList.radio === 1">
      <el-divider content-position="left">KPI数据</el-divider>
      <v-company-kpi :kpilableTable="kpilableTable"></v-company-kpi>

      <el-divider content-position="left">项目流程</el-divider>
      <v-process :trendList="trendList" ref="kpi"></v-process>
    </div>

    <div v-else>
      <el-divider content-position="left">KPI评分汇总</el-divider>
      <v-group-point 
        :targetList="target" 
        :pointData="pointData" 
         ref="kpi">
      </v-group-point>
      <el-divider content-position="left">KPI指标汇总</el-divider>
      <v-group-value
        :groupValueTrend="groupValueTrend"
        :targetList="target"
        :tableData="tableData">
      </v-group-value>
    </div>
  </div>
</template>

<script>
  import VChoose from '@/views/summary/choose'
  import VCharts from '@/components/charts/index'
  import VLabel from '@/components/qa/Label'
  import VCompanyKpi from '@/views/report/qualityKpi/companyKpi'
  import VProcess from '@/views/report/qualityKpi/process'
  import VGroupPoint from '@/views/report/qualityKpi/groupPointTrend'
  import VGroupValue from '@/views/report/qualityKpi/groupValue'
  import { mapState } from 'vuex'
  import htmlToPdf from '@/utils/buildPdf'
  import Vue from 'vue'
  import http from '@/views/sys/axios' 

  Vue.use(htmlToPdf)

  export default {
    name: 'Company',
    provide() {
      return {
        comment: this
      }
    },
    components: {
      VChoose,
      VLabel,
      VCompanyKpi,
      VProcess,
      VGroupPoint,
      VGroupValue
    },
    data() {
      return {
        kpilableTable: [],
        trendList: {},
        pointData: [],
        tableData: [],
        initTableList: [],
        target: {},
        list: {},
        comments: {
          ab_project_comments: {
            bug: '', 
            complaint: '', 
            period: '', 
            release: ''
          },
          ab_project_cover_rate_comments: {
            bug: '', 
            complaint: '', 
            period: '', 
            release: ''
          },
          project_comments: {
            bug: '', 
            complaint: '', 
            period: '', 
            release: ''
          },
          project_cover_rate_comments: {
            bug: '', 
            complaint: '', 
            period: '', 
            release: ''
          },
          table_comments: ''
        },
        groupComment: {
          score_trend_comments: "",
          score_table_comments: "",
          indicator_trend_comments:[], 
          indicator_table_comments: ""
        },
        groupValueTrend: []
      }
    },
    computed: {
      ...mapState({
        chooseList: state => state.chooseList
      }),
      comMonth() {
        if(this.isDetails) {          
          return `${this.$attrs.queryData.time}-${this.$attrs.queryData.groupName}-质量KPI月报`
        }
      },
      id() {
        if(this.isDetails) {
          return this.$attrs.queryData.id
        }
      },
      title() {
        if(this.isDetails) {
          let time = this.$attrs.queryData.time
          if(this.$attrs.queryData.time) {
            const arr = this.$attrs.queryData.time.split(',')
            arr[0] == arr[1] ? time = arr[0] : this.$attrs.queryData.time
          }
          return `${time}-${this.$attrs.queryData.groupName}`
        }
      }
    },
    props: {
      pdfStatus: {
        type: Boolean,
        default: false
      },
      isDetails: {
        type: Boolean,
        default: false
      }
    },
    created() {
      if(this.isDetails) {
        this.getDa() 
      } 
    },
    mounted() {
      setTimeout(() => {
        if(this.isDetails) {               
        if(this.chooseList.radio === 1) {
          this.kpilableTable = this.list.table_data
          this.trendList = {
            ab_project_count_trend: this.list.ab_project_count_trend,
            ab_project_cover_rate_trend: this.list.ab_project_cover_rate_trend,
            project_count_trend: this.list.project_count_trend,
            project_cover_rate_trend: this.list.project_cover_rate_trend
          }
          this.comments.ab_project_comments = this.list.ab_project_comments
          this.comments.ab_project_cover_rate_comments = this.list.ab_project_cover_rate_comments
          this.comments.project_comments = this.list.project_comments
          this.comments.project_cover_rate_comments = this.list.project_cover_rate_comments
          this.comments.table_comments = this.list.table_comments
        } else {
          this.pointData = this.list.score_trend
          this.tableData = this.list.data
          this.groupValueTrend = this.list.indicator_trend
          this.getTarget()
          this.groupComment.score_trend_comments = this.list.score_trend_comments
          this.groupComment.score_table_comments = this.list.score_table_comments
          this.groupComment.indicator_table_comments = this.list.indicator_table_comments
          this.groupComment.indicator_trend_comments = this.list.indicator_trend_comments
        } 
      } 
      }, 1500)  
    },
    methods: {
      toEdit() {
        this.$emit('beforePDF', this.pdfStatus)
      },
      async save() {
        let group
        let shouldComment
        if(this.chooseList.radio === 1) {
          group = ''
          shouldComment = this.comments
        } else {
          group = this.chooseList.groupId
          shouldComment = this.groupComment
          if(shouldComment.indicator_trend_comments.length == 0) {
            shouldComment.indicator_trend_comments = ['', '', '', '']
          }
        }
        
        return new Promise((resolve, reject) => {
          http.post(`/api/report/examine/data?groupId=${group}&time=${this.chooseList.monthKpi}`, shouldComment)
          .then(res => {
            resolve(res)
          })
        })
      },
      async initSave() {
        let res = await this.save()
        if(res.code == 200) {
          this.$message({
            message: '保存成功，已入库!',
            type: 'success'
          });
          this.initTable()
        } else {
          this.$message({
            message: res.msg,
            type: 'warning'
          });
        }
        this.$emit('closeDialog')
      },    
      initTable() {
        let group
        this.chooseList.radio == 1 ? group = '' : group = this.chooseList.groupId
        http.get(`/api/report/examine/list?groupId=${group}&time=${this.chooseList.monthKpi}`)
        .then(res => {
          if(res.code === 200) {
            this.initTableList = res.report_list
            this.$emit('initTable', this.initTableList)
          }
        })
      },  
      getKpilable() {
        let group = ''
        http.get(`/api/indicator/examine/flow/summary?groupId=${group}&time=${this.chooseList.monthKpi}`)
        .then(res => {
          if(res.code === 200) {
            this.kpilableTable = res.table_data
            this.trendList = {
              ab_project_count_trend: res.ab_project_count_trend,
              ab_project_cover_rate_trend: res.ab_project_cover_rate_trend,
              project_count_trend: res.project_count_trend,
              project_cover_rate_trend: res.project_cover_rate_trend
            }
          }
        }).catch(err => {
          console.log(err)
        })
      },
      getDa() {
        http.get(`/api/report/examine/${this.id}/detail`)
        .then(res => {
          if(res.code === 200) {
            this.list = res.data
          }
        })
      },
      getTarget() {
        http.get(`/api/indicator/examine/indicator/value?groupId=${this.chooseList.groupId}&time=${this.chooseList.monthKpi}`)
        .then(res => {
          if(res.code === 200) {
            if(JSON.stringify(res.indicator_value) !== '{}') {
              this.target = res.indicator_value
            }
          }
        })
      },
      getData() {
        http.get(`/api/indicator/examine/data?groupId=${this.chooseList.groupId}&time=${this.chooseList.monthKpi}`)
        .then(res => {
          if(res.code === 200) {
            this.pointData = res.score_trend
            this.tableData = res.data
            this.groupValueTrend = res.indicator_trend
          }
        }).catch(err => {
          console.log(err)
        })
      }
    },
    watch: {
      chooseList: {
        handler: function() {
          if(!this.isDetails) {
            if(this.chooseList.radio === 1) {
              this.getKpilable()
            } else {
              this.getData()
              this.getTarget()
            }
          }
        },
        deep: true
      }
    }
  }
</script>

<style lang="scss" scoped>
  .newReport{
    position: absolute;
    top: 20px;
    right: 20px;
  }
  .primary{
    color: #409EFF;
    font-size: 30px;
    margin-top: 20px;
    margin-bottom: 10px;
    font-weight: 400;
  }
</style>